<template>
    <div>
        <h1>3 Layout Using Details</h1>
        <h2>3.1 Introuduction</h2>
        <ul type="disc">
            <li>
                <p>在elementui中布局组件将页面划分为多个行【row】，每行最多分为24栏【列】</p>
            </li>
            <li>
                <p>又称为 “栅格布局”</p>
            </li>
        </ul>
        <ol>
            <li>以行为基础</li>
            <li>span属性通过动态绑定指定列栅格数量; 注意:一行的总栅格数量不能够产过24个，否则会自动换行</li>
            <li>注意：在一个布局组件中，是由row和col组合而成，因此在使用是要区分 row属性 和 col属性</li>
            <li>举例：</li>
        </ol>
        </br>
        <!-- 创建一行 -->
        <el-row>
            <el-col :span="6">
                <div class="flex">takes up 6 cols</div>
            </el-col>
            <el-col :span="6">
                <div class="flex">takes up 6 cols</div>
            </el-col>
            <el-col :span="6">
                <div class="flex">takes up 6 cols</div>
            </el-col>
            <el-col :span="6">
                <div class="flex">takes up 6 cols</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div class="flex">takes up 8 cols</div>
            </el-col>
            <el-col :span="4">
                <div class="flex">takes up 4 cols</div>
            </el-col>
            <el-col :span="3">
                <div class="flex">takes up 3 cols</div>
            </el-col>
            <el-col :span="9">
                <div class="flex">takes up 9 cols</div>
            </el-col>
        </el-row>
        <h2>3.2 属性使用</h2>
        <ol>
            <li><a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/layout">查询手册</a></li>
            <li>:gutter 行属性 - 设置列间隔</li>
            <li>tag 行属性 - div[default] span 选择使用哪种标签构建行</li>
            <li>:span 列属性</li>
            <li>:offset 列属性 - 设置偏移指定栅格数量，偏移量计入总栅格数量</li>
            <li>:push 列属性 - 设置浮动指定栅格数量，浮动不会影响下一个原件的起始位置</li>
            <ul type="circle">
                <li>
                    <p>offset：</p>
                    <el-row>
                        <el-col :span="8" :offest="4">
                            <div class="flex">takes up 8 cols</div>
                        </el-col>
                        <el-col :span="4">
                            <div class="flex">takes up 4 cols</div>
                        </el-col>
                    </el-row>
                </li>
                <li>
                    <p>push:</p>
                    <el-row>
                        <el-col :span="8" :offest="4" :push="2">
                            <div class="flex">takes up 8 cols</div>
                        </el-col>
                        <el-col :span="4">
                            <div class="flex">takes up 4 cols</div>
                        </el-col>
                    </el-row>
                </li>
            </ul>
        </ol>
        <h2>3.3 布局容器 Container</h2>
        <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/container">查询手册</a>
        <h3>3.3.1 容器组件</h3>
        <ol>
            <li>el-container 外层容器</li>
            <li>el-aside 侧边栏容器</li>
            <li>el-header 顶栏容器</li>
            <li>el-main 主要区域容器</li>
            <li>el-footer 底栏容器</li>
        </ol>
        <h3>3.3.2 创建容器</h3>
        <el-container>
            <!-- header -->
            <el-header>
                <div>
                    <h1> header </h1>
                </div>
            </el-header>
            <el-container>
                <!-- aside -->
                <el-aside>
                    <div>
                        <h1> aside </h1>
                    </div>
                </el-aside>
                <!-- main -->
                <el-main>
                    <div>
                        <h1> main </h1>
                    </div>
                </el-main>
            </el-container>
            <!-- footer -->
            <el-footer>
                <div>
                    <h1> footer </h1>
                </div>
            </el-footer>
        </el-container>
        <h3>3.3.3 容器嵌套使用</h3>
        <p> aside 可以和 main 放在同一个 container 中，显示在同一行</p>
        <h4>3.3.4 容器属性</h4>
        <ul>
            <li><a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/container">查询手册</a></li>
            <li>direction - horizontal vertical 管理container中元素的布局方式</li>
            <li>sample: direction="vertical"</li>
        </ul>
        <el-container direction="vertical">
            <!-- aside -->
            <el-aside>
                <div>
                    <h1> aside </h1>
                </div>
            </el-aside>
            <!-- main -->
            <el-main>
                <div>
                    <h1> main </h1>
                </div>
            </el-main>
        </el-container>
    </div>

</template>
<script>
export default {
    name: "Layout"
}
</script>
<style scoped>
ul {
    list-style-type: circle;
    padding: 4;
    margin: 0;
}

.flex {
    border: 1px solid #098;
    text-align: center;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>